<template>
  <div class="page-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row :gutter="12">
        <el-col :sm="6">
          <el-form-item label="选择试卷" prop="paperId">
            <el-select v-model="form.paperId" placeholder="请选择试卷" @change="getPaperInfo">
              <el-option v-for="item in paperList" :key="item.id" :label="item.paperTitle" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <div>试题列表</div>
          </div>
        </template>
        <div style="max-height: 650px;overflow-y: auto; overflow-x: hidden">
          <ol>
            <li v-for="(item, index) in paperInfo.examQuestionList" :key="index + 'q'" class="question-item">
              <div class="question-title">{{ item.questionText }}</div>
              <div v-if="item.questionType === 'CHOICE'">
                <el-radio-group v-model="item.selectedOptionId">
                  <el-radio v-for="(option, i) in item.examQuestionOptionList" :key="option.id" :value="option.id">
                    {{ ['A', 'B', 'C', 'D', 'E'][i]}}.
                    {{ option.optionText }}
                  </el-radio>
                </el-radio-group>
              </div>
              <div v-if="item.questionType === 'INPUT'">
                <el-input v-model="item.inputContent" placeholder="请输入答案"></el-input>
              </div>
            </li>
          </ol>
        </div>
        <template #footer>
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="$router.back()">取 消</el-button>
        </template>
      </el-card>
    </el-form>
  </div>
</template>

<script>
  import { addAnswer } from "@/api/system/answer"
  import { listPaper, getPaper } from "@/api/system/paper"

  export default {
    data() {
      return {
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          paperId: [{ required: true, message: '请选择试卷'}]
        },
        // 试卷列表
        paperList: [],
        paperInfo: { examQuestionList: []},
      }
    },
    created() {
      listPaper({isOpen: 1, pageSize: 100 }).then(res => {
        this.paperList = res.rows;
        if (this.paperList.length) {
          this.form.paperId = this.paperList[0].id;
          this.getPaperInfo(this.paperList[0].id)
        }
      });
    },
    methods: {
      getPaperInfo(val) {
        getPaper(val).then(res => {
          this.paperInfo = res.data;
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          console.log(this.paperInfo);
          const list = this.paperInfo.examQuestionList.map(item => {
            return {
              paperId: this.paperInfo.id,
              questionId: item.id,
              selectedOptionId: item.selectedOptionId,
              inputContent: item.inputContent,
            }
          })
          addAnswer(list).then(response => {
            this.$modal.msgSuccess("答题练习完成")
            this.$router.back();
          })
        })
      },
    }
  }
</script>

<style scoped>
  .question-item {
    margin-bottom: 12px;
  }
  .question-title {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .color-green {
    color: yellowgreen;
  }
  .page-container {
    padding: 16px;
  }
</style>
